<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频直播详情</title>
    <!--初始化默认样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--页面公共样式，包含头部、尾部等-->
    <link rel="stylesheet" href="css/common.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/flexible.js"></script>
    <script src="js/browser.min.js"></script>
    <script src="js/polyfill.min.js"></script>
    <!--ckplayer播放器插件调用-->
    <script type="text/javascript" src="./ckplayer/ckplayer.js" charset="utf-8"></script>
    <link rel="stylesheet" href="css/livingDetail.css">
</head>
<body>
<div id="app" v-cloak>
    <!--头部-->
    <my-header @loginout = "handleLoginOut"></my-header>
    <!--头部结束-->

    <!--内容区-->
    <div class="cnt">
        <div class="main">
            <div class="cntpage">
                <li class="cntpageli ">首页</li>/<li class="cntpageli">课程</li>/<li class="cntpageli">直播分类</li>
            </div>
            <div class="video" :class="{largeheight:!isTitle}">
                <div class="videomp4" :class="{largewidth:!isTitle}">
                    <div id="videofla" :class="{largeheight:!isTitle}"></div>
                    <div class="videobtn" @click="isTitle=!isTitle">{{isTitle?'▷':'◁'}}</div>
                </div>
                <div class="videoinf" v-show="isTitle">
                    <div class="videoinfmain">
                        <div class="videoinftop">{{liveinfo.title}}</div>
                        <div class="videoinfid">
                            <div class="videoinfidd">{{liveinfo.chid}}</div>
                            <div class="videoinfidrgt">
                                <span class="font18">♥收藏</span><span class="font18">✉分享</span>
                            </div>
                        </div>
                        <div class="videoinfmsg">
                            <span class="videoinfmsgimg"><img src="imgs/icon_Speaker.png"></span><span class="font18">主讲人:{{liveinfo.fullname}}</span>
                        </div>
                        <div class="videoinfmsg">
                            <span class="videoinfmsgimg"><img src="imgs/icon_time.png"></span><span class="font18">{{liveinfo.starttime}}开始</span>
                        </div>
                        <div class="videoinfmsg">
                            <span class="videoinfmsgimg"><img src="imgs/icon_Number of visitors.png"></span><span class="font18">{{liveinfo.clicks}}人正在观看</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="cnttop">
        <div class="cntqie">
            <li class="cnttopli font20" :class=" {liactive:currentTab==1}" @click="currentTab=1">课程详情</li>
            <li class="cnttopli font20" :class=" {liactive:currentTab==2}" @click="currentTab=2">课程评价</li>
        </div>
    </div>
    <div class="cntt">
        <div class="cnttmain">
            <div class="cntlf" v-show="currentTab==1">
                <div class="cntlftop"><span class="cntlftopspan"></span><div class="cntlftopdiv font20">简介</div></div>
                <div class="cntlfintr font20">{{liveinfo.information}}</div>
            </div>
            <div class="cntlf" v-show="currentTab==2">
                <div class="cntlftop"><span class="cntlftopspan"></span><div class="cntlftopdiv font20">评论</div></div>
                <div class="cntlfrmk">
                    <div class="cntlfrmkimg"><img src="./imgs/vip.png" alt=""></div>
                    <div class="cntlfrmktext"><textarea class="font16" name="" cols="30" rows="10" placeholder="想说点啥..."></textarea></div>
                    <div class="cntlfrmkbtn"><button type="button" @click="handleToRequest">{{requestButtonText}}</button></div>
                </div>
                <div class="cntlfrmkde">
                    <li class="cntlfrmkdeli">
                        <div class="cntlfrmkdeliimg"><img src="./imgs/vip.png" alt=""></div>
                        <div class="cntlfrmkdelirgt">
                            <div class="cntlfrmkdelirgttop font20">魏坤</div>
                            <div class="cntlfrmkdelirgttag">
                                <div class="cntlfrmkdelirgtl">
                                    <span class="cntlfrmkdelirgttagspan font16">武汉市江汉大学</span>
                                    <span class="cntlfrmkdelirgttagspan font16">设计学院</span>
                                    <span class="cntlfrmkdelirgttagspan font16">园林设计</span>
                                </div>
                                <div class="cntlfrmkdelirgtlr">
                                    <div class="cntlfrmkdelirgtlrimg font16">☞ 23</div>
                                </div>
                            </div>
                            <div class="cntlfrmkdelirgtcn font16">
                                天青色等烟雨，而我在等你。炊烟袅袅升起，隔江千万里。在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔。天青色等烟雨，而我在等你。月色被打捞起，晕开了结局。如传世的青花瓷自顾自美丽，你眼带笑意。
                                天青色等烟雨，而我在等你。炊烟袅袅升起，隔江千万里。在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔。天青色等烟雨，而我在等你。月色被打捞起，晕开了结局。如传世的青花瓷自顾自美丽，你眼带笑意。
                            </div>
                        </div>
                    </li>
                </div>
            </div>
            <div class="cntrgt">
                <div class="cntrgttop">
                    <div class="cntlftop"><span class="cntlftopspan"></span><div class="cntlftopdiv font20">主讲人</div></div>
                    <div class="cntrgttopimg"><img :src="userinfo.images" alt=""></div>
                    <div class="cntrgttopitr font22">{{userinfo.fullname}}</div>
                    <div class="cntrgttopitro font20">{{userinfo.labelstr}}</div>
                    <div class="cntrgttopctr font20">{{userinfo.synopsis}}</div>
                </div>
                <div class="cntrgtbtm">
                    <div class="cntlftop"><span class="cntlftopspan"></span><div class="cntlftopdiv font20">更多推荐</div></div>
                    <!--更多推荐循环-->
                    <div class="cntrgtbtmdiv" v-for="(item,index) in recommendlivelist" :key="index">
                        <div class="cntrgtbtmdivtop">
                            <div class="cntrgtbtmdivtoptag">直播</div>
                            <div class="cntrgtbtmdivtopimg"><img :src="item.images" alt=""></div>
                            <div class="cntrgtbtmdivtopid">
                                <div class="cntrgtbtmdivtopidnum">{{item.chid}}</div>
                                <div class="cntrgtbtmdivtopidsta">正在直播</div>
                            </div>
                        </div>
                        <div class="cntrgtbtmdivbtm">
                            <div class="cntrgtbtmdivbtmtit font20">{{item.title}}</div>
                            <div class="cntrgtbtmdivbtmmsg">
                                <span class="cntrgtbtmdivbtmmsgtime font14">{{item.starttime}}</span>
                                <div class="cntrgtbtmdivbtmms">
                                    <span class="cntrgtbtmdivbtmmsgimg"><img src="./imgs/icon_Speaker.png" alt=""></span>
                                    <span class="cntrgtbtmdivbtmmsgpep font14">{{item.fullname}}</span>
                                    <span class="cntrgtbtmdivbtmmsgimg"><img src="./imgs/icon_Number of participants.png" alt=""></span>
                                    <span class="cntrgtbtmdivbtmmsgpep font14">{{item.clicks}}人</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--内容区结束-->
    <!--尾部-->
    <my-footer></my-footer>
    <!--尾部结束-->
</div>
<!--使用vue渲染页面-->
<script src="js/vue.development.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/axios.js"></script>
<script src="js/element-ui.js"></script>
<script src="js/js.cookie.js"></script>
<!--用于模拟接口，上线后注释-->
<script src="js/mock.js"></script>
<!--用于模拟接口，上线后注释-->
<script src="data/api.js"></script>
<script src="js/component.js"></script>

<script type="text/javascript">
    var videoObject = {
        container: '#videofla', //容器的ID或className
        variable: 'player',//播放函数名称
        autoplay:true,
        poster:'./imgs/ckplayerposter.png',
        live:true,
        video: 'rtmp://58.200.131.2:1935/livetv/hunantv'    //湖南卫视信号  rtmp://58.200.131.2:1935/livetv/hunantv
                                                             //香港卫视信号 rtmp://live.hkstv.hk.lxdns.com/live/hks2
    };
    var player = new ckplayer(videoObject);
</script>
<script>

    var classid=GetQueryString("id");   //获取课程id

    new Vue({
        el:"#app",
        name:'视频直播详情',
        data:function(){
            return{
                currentTab:'1',
                isTitle:true,
                classid:classid,   //获取课程id
                liveinfo:[],
                userinfo:[],
                isLogin:false, //用户是否登录过
                loginuserInfo:{}, //登录的用户信息
                requestButtonText:"登录",//回复按钮的内容
                recommendlivelist :[],
                // liveRankingList: [
                //     {
                //         "id": "cbf80da7bd7f22866e085da89b4f0c8b",
                //         "title": "精品录播教室",
                //         "information": "精品录播教室精品录播教室精品录播教室精品录播教室",
                //         "chid": "35000000",
                //         "userid": "4a50210b56817fac9e5d90ef04774d05",
                //         "fullname": "李白",
                //         "images": "http://58.48.193.190:8088/wisdomclassroom/public/images/room/jplbjs.jpg",
                //         "starttime": "2019-05-30 11:51:15",
                //         "clicks": 26
                //     },
                //     {
                //         "id": "cbf80da7bd7f22866e085da89b4f0c8b",
                //         "title": "物联网教室",
                //         "information": "精品录播教室精品录播教室精品录播教室精品录播教室",
                //         "chid": "35000000",
                //         "userid": "4a50210b56817fac9e5d90ef04774d05",
                //         "fullname": "张总",
                //         "images": "http://58.48.193.190:8088/wisdomclassroom/public/images/room/jplbjs.jpg",
                //         "starttime": "2019-05-30 11:51:15",
                //         "clicks": 29
                //     },
                // ]
            }
        },
        methods:{

            getLiveInfo:function() {
                axios.get('http://getliveInfoApi',{
                    id:classid,
                }).then(this.getLiveInfoSucc)
            },

            handleLoginOut:function(){
              this.isLogin = false;
              this.requestButtonText = "登录";
              this.loginuserInfo = {}
            },
            // 评论回复按钮根据是否登录进行登录或回复
            handleToRequest:function(){
              if(!this.isLogin){ //如果未登录则点击按钮导航到登录页
                window.location.href = "login.html";
              }else{
                  //回复评论、新增评论信息功能请写在此处

                  //当前的登录用户信息在this.loginuserInfo里
                console.log(this.loginuserInfo)
              }
            },
            getLiveInfoSucc:function(res) {
                console.log(res);
                if (res.status == 200 && res.data) {
                    res = res.data.get_liveList_response;
                    if (res.resultCode == "0000") {
                       console.log(res.result)
                        this.liveinfo=res.result.liveinfo;
                        this.userinfo=res.result.userinfo;
                        this.recommendlivelist=res.result.recommendlivelist;
                    }else{
                        alert("resultCode错误");
                    }
                }
            },
        },
        // 判断登录状态，拉取用户信息
        created:function () {
            this.getLiveInfo();
            if(this.$Cookies.get("userId") && this.$Cookies.get("userInfo")){

                this.loginuserInfo = this.$Cookies.get("userInfo");
                this.isLogin = true;
                this.requestButtonText = "回复"

            }else{
                this.isLogin = false;
            }
        }
    });
</script>
</body>
</html>
